<template>
	<view class="Test-container">
		<view class="btns">
			<button type="primary" @click="getChannels">获取支付通道</button>
			<button type="primary" @click="restoreComplateRequest" v-if="iap">获取已购买商品</button>
		</view>

		<view class="list">
			<view class="item" v-for="i in product_list" :key="i.productid">
				<view class="title">{{i.title}}</view>
				<view class="price">{{i.price}}元</view>
				<button type="warn" @click="pay(i)">支付</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iap: null, // 支付通道
				ids: ['gold16'], // 应用内购项目产品 ID 数组
				product_list: [] // 应用内购项目列表
			};
		},
		methods: {
			// 获取支付通道
			getChannels() {
				// #ifdef APP-PLUS
				plus.payment.getChannels(res => {
					let channel = res.find(i => i.id === 'appleiap')
					this.iap = channel ? channel : null
					this.requestOrder()
				}, function(e) {
					// plus.nativeUI.alert("获取支付通道失败，请稍后重试。", function() {}, "提示");
				})
				// #endif
			},
			// 获取内购项目列表
			requestOrder() {
				// #ifdef APP-PLUS
				this.iap.requestOrder(
					this.ids,
					res => {
						this.product_list = res
					},
					function(errormsg) {
						plus.nativeUI.alert("获取应用内购项目失败，请稍后重试。", function() {}, "提示");
					}
				)
				// #endif
			},
			// 调起支付
			pay(i) {
				// #ifdef APP-PLUS
				plus.payment.request(this.iap, {
					productid: i.productid,
					optimize: true // 支付时设置 optimize: true  
				}, result => {
					// 支付成功回调
					console.log("plus.payment.request-success--------------------",JSON.stringify(results));
				}, e => {
					// 用户取消支付或者调起支付失败回调
					restoreComplateRequest()
				});
				// #endif
			},
			// 获取已购的非消耗性商品和订阅商品
			restoreComplateRequest() {
				this.iap.restoreComplateRequest({}, results => {
					// results 格式为数组存放恢复的IAP商品交易信息对象 IAPTransaction，通用需将返回的支付凭证传给后端进行二次认证  
					console.log('restoreComplateRequest-results---', JSON.stringify(results))
				}, e => {
					// 错误回调
					console.log('restoreComplateRequest-results ---fail---', JSON.stringify(e))
				});
			}
		}
	}
</script>

<style lang="scss">
	.Test-container {
		padding: 24rpx;

		.btns {
			button {
				margin-bottom: 24rpx;
			}
		}

		.list {
			margin-top: 24rpx;

			.item {
				margin-bottom: 24rpx;
				padding: 30rpx;
				border-radius: 24rpx;
				box-shadow: 0rpx 12rpx 36rpx 0rpx rgba(0, 0, 0, 0.04);
				background-color: #252526;

				.title {
					margin-bottom: 24rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.price {
					margin-bottom: 24rpx;
					font-size: 36rpx;
					font-weight: bold;
					color: #FF2C4C;
				}
			}
		}
	}
</style>